<template>
    <div class="queryMSMPage" >
      <h1 v-show="!treeModelObj.stationId">部门Id获取失败，请联系管理员</h1>
      <div v-show="treeModelObj.stationId">
        <div class="search-div">
          <input type="text"
                 placeholder="输入关键字如：发送人、收件人、发送手机号码、短信内容"
                 v-model="searchStr"
                 class="input-search">
          <button class="btn query-btn queryMSMPage-border"
                  @click="stationTree"
                  v-text="stationName"></button>
          <div class="time-select-wrap">
            <span class="f-l send-time">发送时间：</span>
            <!-- startTime -->
            <div class="input-group date time-item queryMSMPage-border" id="startTimeId">
              <input type="hidden" ref="startTimeRef" name="birthday">
              <input type="text" ref="startTimeRef" readonly="readonly" id="datetimepicker" class="form-control input-time-show" required="required" data-date-format="dd-mm-yyyy">
              <span class="input-group-addon span-time-icon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
            </div>
            <!-- startTime end-->
            <span class="f-l send-time">&nbsp;--&nbsp;</span>
            <!-- endTime -->
            <div class="input-group date time-item queryMSMPage-border" id="endTimeId">
              <input type="hidden" ref="endTimeRef" name="birthday">
              <input type="text" ref="endTimeRef" readonly="readonly" id="endDatetimepicker" class="form-control input-time-show" required="required" data-date-format="dd-mm-yyyy">
              <span class="input-group-addon span-time-icon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
            </div>
            <!-- endTime end-->
            <button class="btn query-btn queryMSMPage-border"
                    @click="queryBtnClick(1)"
            >查询</button>
          </div>
        </div>
        <!---->
        <div class="table-ctrl-body table-query">
          <!--表格组-->
          <div class="table-ctrl">
            <!--表格头-->
            <!--{{treeTableRow}}-->
            <div class="table-header">
              <table class="table-default">
                <thead class="query-table">
                <tr>
                  <th style="width: 50px;">序号</th>
                  <th :style="theadStyleFn(ths.key)"
                      v-for="ths in tableHeader">
                    {{ths.value}}
                  </th>
                </tr>
                </thead>
              </table>
            </div>
            <!--表格中部-->
            <div class="table-overflowX query-table-body">
              <table class="table-default">
                <tbody>
                <tr class="query-tbody-tr"
                    v-for="(trs,index) in tableRow"
                >
                  <td class="query-tbody-td" style="width: 50px;">{{index+1}}</td>
                  <td class="query-tbody-td"
                      :style="theadStyleFn(tds.key)"
                      v-for="tds in tableHeader"
                      :title="trs[tds.key]">
                    {{ trs[tds.key] | queryFilter(tds.key,trs) }}
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
          <!--表格组 end-->
        </div>
        <!-- 分页 -->
        <pages class="pages"
               :showItem = showItem
               :allpage = allpage
               :pageSize = pageSize
               :allDataSum = allDataSum
               @current-change = currentChange >
        </pages>
        <!-- 分页闭合 -->
        <!--ztree弹窗-->
        <ztreeModel
          :treeModelObj="treeModelObj"
          @ztreeModelSub="ztreeModelSub"
          @ztreeModelClose="ztreeModelClose"
        ></ztreeModel>
        <!--ztree弹窗 end-->
      </div>
    </div>
</template>

<script>
  import pages from './pages';
  import moment from 'moment';
  import ztreeModel from './ztreeModel';
  export default {
    name: "queryMSMPage",
    components:{
      pages,
      ztreeModel
    },
    data(){
      return {
        startTime: '',  // 起始时间
        endTime: '',    // 结束时间
        searchStr: null,  // 搜索输入字段
        tableRow: [],  // 表格数据
        tableHeader: [
          {"key":"sendStationName","value":"发送单位"},
          {"key":"sendPersonName","value":"发送人"},
          {"key":"receiveStationName","value":"接收单位"},
          {"key":"receivePersonName","value":"收件人"},
          {"key":"messageContent","value":"短信内容"},
          {"key":"sendTime","value":"发送时间"},
          {"key":"status","value":"状态"},
        ],

        showItem: 10,       //分页条下面item的数目
        allpage: 0,         //根据每页数据/总数据得到的总页数
        pageSize: 15,       //每页数据
        allDataSum: 0,      //总数据

        treeModelObj:{
          isShow: false,
          stationId: ''      //  wfp
        },
        stationName: '',   // 部门名称
        stationIds: [],    // 点击部门id集合

      }
    },
    mounted(){
      this.init();
    },
    methods:{
      init(){
        // this.s_alert(document.cookie.StationId)
        // 初始化时间
        this.startTime = moment().hour(0).format();
        this.endTime = moment().format();
        // 初始化时间控件
        this.initTimeControl();
        // 初始化cookie数据
        this.initCookie();
        // 查询用户所属单位id的名字
        this.queryStationName();

      },
      //初始化cookie数据
      initCookie(){
        let cookieObj = this.getcookie();
        if(s_test){
          this.treeModelObj.stationId = "1";
        }else{
          this.treeModelObj.stationId = cookieObj.StationId;
          if(this.treeModelObj.stationId){
            this.s_alert('部门Id获取失败，请联系管理员',3000)
            return
          }
        }

        // this.treeModelObj.stationId = "1";
      },
      // 查询部门名称
      queryStationName(){
        this.$axios.get(baseURL+"api/jp-BIRM-UserProfile-ms/layer-policestations/"+this.treeModelObj.stationId)
          .then(res=>{
            this.stationName = res.data.stationName;
            let ary = [];
            ary.push(res.data)

            this.stationIdsFn(ary);
            // 初始化查询显示
            this.queryBtnClick(1);
          })
          .catch(err=>{
            this.s_alert('查询部门数据错误，请联系管理员')
            //console.log(err);
          })

      },
      stationIdsFn(data){
        for(let i = 0; i<data.length;i++){
          this.stationIds.push(data[i].id);
          if(data[i].childrenPoliceStation.length>0){
            this.stationIdsFn(data[i].childrenPoliceStation)
            //console.log(data[i].childrenPoliceStation)
          }
        }
      },
      // 查询按钮
      queryBtnClick(page){
        // '2018-10-18T11:10:39.0000000+08:00'
        let start = moment(this.startTime).format().split('+')[0]+'.0000000+08:00';
        let end = moment(this.endTime).format().split('+')[0]+'.0000000+08:00';
        // let end = "2018-10-29T23:10:39.0000000+08:00";
        // let start ="2018-10-18T00:00:00.0000000+08:00";
        let data = {
          "endDate": end,
          "keyWord": this.searchStr,
          "startDate": start,
          "stationIds": this.stationIds
          // "stationIds": ['1']
        }
        let url;
        if (sendSomeMSMUrl === 'WeiFang') {
          url = baseURL+"api/jp-BSPA-PolSituInfo-ms/shortmessage/findbystationid/"+page+"/"+this.pageSize
        } else {
          url = baseURL+"api/jp-BSPA-PolSituInfo-ms/message/shortmessage/findbystationid/"+page+"/"+this.pageSize
        }
        this.$axios({
          method: "post",
          url: url,
          data:data
        }).then( res => {
          this.tableRow = res.data.list;
          this.allDataSum = res.data.total;
          this.allpage = Math.ceil(res.data.total/this.pageSize);
        } )
      },
      // 分页
      currentChange(current){
        this.queryBtnClick(current);
      },
      // 时间控件初始化
      initTimeControl(){
        let self = this;
        $(function () {
          $('#startTimeId').datetimepicker({
            language: "zh-CN",
            format: "yyyy-mm-dd hh:ii:ss",
            endDate: new Date(),
            // minView: "month",
            autoclose: true
          }).on("changeDate",function(ev){
            let value = self.$refs.startTimeRef.value;
            if(value <= self.endTime){
              self.startTime = value;
            }else {
              self.s_alert('开始时间不能大于结束时间');
              self.$nextTick(function(){
                let time = self.startTime
                self.$refs.startTimeRef.value = time.replace('T',' ').split('+')[0];
              })
            }
            //console.log(self.startTime);
            // //console.log(ev.date.valueOf());
          });
          $('#endTimeId').datetimepicker({
            language: "zh-CN",
            format: "yyyy-mm-dd hh:ii:ss",
            endDate: new Date(),
            // minView: "month",
            autoclose: true
          }).on("changeDate",function(ev){
            let value = self.$refs.endTimeRef.value;
            if(self.startTime <= value ){
              self.endTime = value;
            }else {
              self.s_alert('结束时间不能小于开始时间');
              self.$nextTick(function () {
                let time = self.endTime;
                self.$refs.endTimeRef.value = time.replace('T',' ').split('+')[0];
              })
            }
            ////console.log(ev.date.valueOf());
          });

          self.$refs.startTimeRef.value = moment().hour(0).format('YYYY-MM-DD hh:mm:ss');
          self.$refs.endTimeRef.value = moment().format('YYYY-MM-DD hh:mm:ss');
        });

      },
      // 部门按钮点击
      stationTree() {
        this.ztreeModelClose();
      },
      // 树弹窗确定按钮
      ztreeModelSub(data) {
        if(data.stationName != '' || data.stationIds.length > 0){
          this.stationName = data.stationName;
          this.stationIds = data.stationIds;
        }
        this.ztreeModelClose();
      },
      // 树弹窗
      ztreeModelClose(){
        this.treeModelObj.isShow = !this.treeModelObj.isShow;
        // //console.log(this.treeModelObj.isShow)
      },
      theadStyleFn(key){
        switch (key) {
          case 'sendPersonName':
            return "width:5%"
          case 'status':
            return "width:89px"
          case 'messageContent':
            return "width:20%"
        }
        return "width:10%";
      }
    }, // end methods
    filters: {
      queryFilter(item,key,value){
        // //console.log(item,key,value)
        if(key == "receivePersonName"){
          return item+"("+value.receivePersonPhone+")";
        }else if(key == "status"){
          if(item === 1) {
            return "成功";
          }else if(item === 0) {
            return "失败";
          }else {
            return "发送中";
          }
        }else if(key == "sendTime"){
          return item.replace('T',' ').split('.')[0];
        }else{
          return item;
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .queryMSMPage {
    background-color: #00223b;
    padding-top: 50px;
    padding: 10px;
    .table-query {
      height: calc(100% - 112px);
      margin-bottom: -74px;
    }
    .table-ctrl-body .table-ctrl {
      padding-bottom: 0px;
    }
    .pages {
      position: absolute;
      bottom: 0;
    }
  }
  .search-div {
    position: relative;
    margin-top: 50px;
    .input-search {
      height: 34px;
      width: 40%;
      border: 1px solid #00adf4;
      border-radius: 2px;
      background-color: #00223b;
      color: #fff;
      &::-webkit-input-placeholder{
        color: #006ee6;
      }
    }
    .time-select-wrap {
      float: right;
      .send-time {
        color: #fff;
        font-size: 14px;
        line-height: 34px;
      }
      .time-item {
        width: 220px;
        float: left;
      }

      .input-time-show {
        color: #fff;
        background-color: #00223b;
      }
      .span-time-icon {
        color: #00adf4;
        border: none;
        border-left: 1px solid #00adf4;
        background: transparent;
      }
    }
  }
  .query-btn {
    margin-left: 10px;
    font-size: 14px;
    line-height: 34px;
    padding: 0 4px;
    color: #00acf4;
    background-color: #003f60;
    border-radius: 4px;
  }
  .query-table {
    background-color: #009bff;
  }
  .query-table-body {
    margin-top: -2px;
  }
  .query-tbody-tr {
    border-bottom: 1px solid #007dcd;
    border-left: 1px solid #007dcd;
    border-right: 1px solid #007dcd;

  }
  .table-ctrl .table-default .query-tbody-td {
    border-right:none;
  }
</style>
<style>
  .glyphicon-calendar:before {
    content: "\1f4c5";
  }
  .queryMSMPage-border {
    border: 1px solid #00adf4;
  }
</style>
